<template>
  <div class="content">
    <!-- 筛选区域 -->
    <el-row style="min-width:1366px">
      <div>
        <span>图片主题</span>
        <el-input v-model="query.subject" placeholder="输入图片主题筛选" />
      </div>

      <div>
        <span>标签</span>
        <el-select
          v-model="query.tag"
          style="width: calc(100% - 96px)"
          filterable
          placeholder="请选择"
        >
          <el-option v-for="(val, key, i) in tagTypeOptions" :key="i" :label="val" :value="key" />
        </el-select>
      </div>

      <div>
        <span>使用授权</span>
        <el-select v-model="query.use_type" placeholder="请选择">
          <el-option v-for="(val, key, i) in useTypeOptions" :key="i" :label="val" :value="key" />
        </el-select>
      </div>

      <div>
        <el-button class="filter" type="primary" plain @click="getGalleryList">筛选</el-button>
        <el-button type="primary" plain class="reset" style="margin-left:20px" circle @click="reload">
          <i class="el-icon-refresh-right" />
        </el-button>
      </div>
    </el-row>
    <!-- 表格区域 -->
    <el-table
      height="710px"
      :data="galleryList"
      style="width: 100%"
      :header-cell-style="{color:'black'}"
    >
      <el-table-column label="编号" prop="id" min-width="40px" />
      <el-table-column label="图片" prop="company_name" width="168px">
        <template v-slot="scope">
          <el-image
            class="el-image"
            :src="`${scope.row.preview_img_full}`"
            :preview-src-list="[scope.row.preview_img_full]"
            alt
          />
        </template>
      </el-table-column>
      <el-table-column label="图片主题" prop="subject" min-width="100px" />
      <el-table-column label="标签" min-width="100px">
        <template v-slot="scope">
          <el-tag>{{ scope.row.get_tag_display.name }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="使用权限" prop="use_type_display" min-width="100px">
        <template v-slot="scope">
          <el-tag
            effect="dark"
            :type="useTypeOptions[scope.row.use_type_display]==='无需授权'?'':'warning'"
          >{{ useTypeOptions[scope.row.use_type_display] }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" prop="created_at" min-width="100px" />
      <el-table-column label="操作">
        <template v-slot="scope">
          <el-button
            type="text"
            @click="downloadFile(scope.row.use_type_display,scope.row.id,scope.row.get_tag_display.name,scope.row.get_tag_auth,scope.row.get_tag_display.id)"
          >
            <!-- 下载源文件 -->
            {{ scope.row.use_type_display==='NOT'?'下载源文件':scope.row.get_tag_auth===null?'申请授权':'下载源文件' }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页区域 -->
    <div class="dingwei">
      <el-pagination
        :current-page="query.page"
        :page-sizes="$arrays.tableSize"
        :page-size="query.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 提示对话框 -->
    <el-dialog
      title="申请授权"
      :visible.sync="downloadFileDialogVisible"
      width="30%"
      class="dialog"
    >
      <h5 style="margin-top:0">
        您现在申请的是
        <el-tag style="margin-left:16px;margin-right:16px">{{ tagDisplayName }}</el-tag>标签图库使用权
      </h5>
      <div>
        <h5 class="stars">申请理由</h5>
        <el-input v-model="content.content" placeholder="请在此填写申请理由" />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="downloadFileDialogVisible = false">取 消</el-button>
        <el-button class="el-button-right" type="primary" @click="applyGallery()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  getGalleryList,
  getTags,
  getDownloadUrl,
  applyGallery
} from '@/api/gallery'
export default {
  name: 'Gallery',
  data() {
    return {
      galleryList: [],
      query: {
        subject: '',
        use_type: '',
        tag: '',
        page: 1,
        limit: 20
      },
      // content: {
      content: {
        content: ''
      },
      total: 0,
      tagDisplayName: '',
      id: '',
      useTypeOptions: {
        '': '全部',
        NOT: '无需授权',
        AUTH: '需授权'
      },
      tagTypeOptions: {},
      downloadFileDialogVisible: false,
      ruleForm: {
        name: ''
      },
      rules: {
        name: []
      }
    }
  },
  created() {
    this.getGalleryList()
    this.tagTypeOptions[''] = '全部'
    getTags().then((res) => {
      //
      res.data.data.map((e, item) => {
        this.tagTypeOptions[e.name] = e.name
      })

      //   this.tagTypeOptions = res.data.data
    })
  },
  methods: {
    getGalleryList() {
      getGalleryList(this.query).then((res) => {
        this.total = res.data.data.total
        this.galleryList = res.data.data.data
        console.log(this.galleryList)
      })
    },
    handleSizeChange(newPageSize) {
      this.query.limit = newPageSize
      this.getGalleryList()
    },
    handleCurrentChange(newPage) {
      this.query.page = newPage
      this.getGalleryList()
    },
    reload() {
      this.query = {
        subject: '',
        use_type: '',
        tag: '',
        page: 1,
        limit: 20
      }
      this.getGalleryList()
      this.tagTypeOptions[''] = '全部'
      getTags().then((res) => {
        res.data.data.map((e, item) => {
          this.tagTypeOptions[e.name] = e.name
        })
      })
    },
    downloadFile(useType, id, name, auth, tagId) {
      switch (useType) {
        case 'NOT':
          this.getDownloadUrl(id)
          break
        case 'AUTH':
          console.log(typeof auth)
          if (auth === null) {
            this.downloadFileDialogVisible = true
            this.tagDisplayName = name
            this.id = tagId
          } else {
            this.getDownloadUrl(id)
          }
          break
      }
    },
    getDownloadUrl(id) {
      getDownloadUrl(id).then((res) => {
        window.open(res.data.data)
      })
    },
    applyGallery() {
      this.downloadFileDialogVisible = false
      applyGallery(this.id, this.content)
        .then((res) => {
          if (res.data.code === 200) {
            this.$message({
              showClose: true,
              message: '申请授权成功',
              duration: 3000,
              type: 'success'
            })
          }
        })
        .catch((err) => {
          this.$message({
            showClose: true,
            message: err,
            duration: 3000,
            type: 'error'
          })
        })
    }
  }
}
</script>
<style lang="scss" scoped>
.content {
  width: 100%;
  padding: 24px;
  .el-row {
    div {
      display: inline-block;
      width: 25%;
      span {
        font-size: 16px;
        margin-right: 24px;
        font-weight: bold;
      }
      .el-input {
        width: calc(100% - 128px);
      }
      .el-select {
        width: calc(100% - 128px);
      }
    }
  }
  .el-table {
    margin-top: 40px;
  }
}
.dialog {
  .stars {
    margin-top: 0;
    margin-bottom: 0;
  }
  .stars {
    margin-bottom: 16px;
    display: inline-block;
  }
  .stars::before {
    content: "*";
    color: #f56c6c;
    margin-right: 4px;
  }
}
.el-table tr td {
  padding: 0;
  div {
    margin: 0;
    padding: 0;
  }
}
.el-image {
  margin: 10px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 128px;
  height: 128px;
}
// .el-table--medium th,
// .el-table--medium td {
//   padding: 10px 0 !important;
// }
</style>
<style lang="css" scoped>
.el-table--medium /deep/ td {
  padding: 0 0 !important;
}
</style>

